<template>
  <div class="new-comment" @click="toLogin">
    <edu-textarea :value.sync="replyTextarea" :args="argsTextarea"></edu-textarea>
    <el-row type="flex" justify="end">
      <el-button :type="isBtnInfo" size="mini" :disabled="isDisabled" @click="handleAddComment"
        >发布</el-button
      >
    </el-row>
  </div>
</template>

<script>
import EduTextarea from '@/components/EduTextarea'
export default {
  components: {
    EduTextarea
  },
  inject: ['reload'],
  data() {
    return {
      replyTextarea: '',
      argsTextarea: {
        minlength: 1,
        maxlength: 200,
        rows: 4,
        word_limit: 1,
        placeholder: '发表评论'
      },
      isBtnInfo: 'info',
      isDisabled: true
    }
  },
  watch: {
    replyTextarea() {
      if (this.replyTextarea.trim().length > 0) {
        this.isDisabled = false
        this.isBtnInfo = 'primary'
      } else {
        this.isDisabled = true
        this.isBtnInfo = 'info'
      }
    }
  },
  methods: {
    toLogin() {
      this.$globalToLogin(() => {})
    },
    // 添加评论
    handleAddComment(val) {
      this.$api.createTopicComment(
        this.$route.query.id,
        {
          content: this.replyTextarea.trim()
        },
        res => {
          this.$message.success(res.msg)
          this.$emit('update')
          this.replyTextarea = ''
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.new-comment {
  ::v-deep .el-textarea {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
